<template>
    <div>
        <div id="courseList">
            <el-table
                :data="courselist"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="课程名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="credit"
                    label="学分"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="teacherId"
                    label="授课老师id">
                </el-table-column>
                <el-table-column
                    prop="classTime"
                    label="上课时间">
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="类型"
                  width="100"
                  :filters="[{ text: '考试', value: '1' }, { text: '考察', value: '0' }]"
                  :filter-method="filterTag"
                  filter-placement="bottom-end">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.type == '1' ? 'primary' : 'success'"
                      disable-transitions>{{scope.row.type == '1' ? '考试' : '考察'}}</el-tag>
                  </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="courseAdd">
            <el-button type="primary" @click="dialogFormVisible = true">开设新课程</el-button>
            <el-dialog title="开设新课程" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="课程名称" :label-width="formLabelWidth">
                      <el-input v-model="newcourse.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学分" :label-width="formLabelWidth">
                      <el-input-number v-model="newcourse.credit" :precision="1" :step="0.5" :max="5" :min="0.5"></el-input-number>
                    </el-form-item>
                    <el-form-item label="授课老师" :label-width="formLabelWidth">
                      <el-select v-model="newcourse.teacherId" placeholder="请选择">
                        <el-option
                          v-for="item in teacherlist"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="课程时间" :label-width="formLabelWidth">
                      <el-input v-model="newcourse.classTime" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="课程时间" :label-width="formLabelWidth">
                      <el-radio-group v-model="newcourse.type" size="small">
                        <el-radio-button label="1">考试</el-radio-button>
                        <el-radio-button label="0">考察</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancleAddCourse">取 消</el-button>
                    <el-button type="primary" @click="addCourse">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<style lang="less">

</style>

<script>
import { addCourse, getAllCouse } from '@/api/couser'
import { getAllUsers } from '@/api/user'
import { Message } from 'element-ui'

export default {
  data () {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      courselist: [
      //   {
      //   name: '1',
      //   credit: '1',
      //   teacherId: '1',
      //   classTime: '1',
      //   type: '1'
      // },
      // {
      //   name: '2',
      //   credit: '2',
      //   teacherId: '2',
      //   classTime: '2',
      //   type: '0'
      // }
      ],
      teacherlist: [],
      newcourse: {
        id: '',
        name: '',
        credit: '',
        teacherId: '',
        classTime: '',
        type: ''
      }
    }
  },
  methods: {
    async addCourse () {
      this.dialogFormVisible = false
      // console.log(this.newcourse)
      await addCourse(this.newcourse)
      Message.success('添加成功')
      this.courselist = (await getAllCouse()).data
    },
    cancleAddCourse () {
      this.dialogFormVisible = false
      this.newcourse.name = ''
      this.newcourse.credit = ''
      this.newcourse.teacherId = ''
      this.newcourse.classTime = ''
      this.newcourse.type = ''
    },
    filterTag (value, row) {
      return row.type === value
    }
  },
  mounted: async function () {
    const res = await getAllCouse()
    this.courselist = res.data
    const users = (await getAllUsers()).data
    users.forEach(el => {
      if (el.role === 'teacher') {
        this.teacherlist.push(el)
      }
    })
  }
}
</script>
